<style type="text/css">

</style>
<h1>Websocket 测试 <label id="heart-sign"></label></h1>

<hr>
<div id="layui-container" class="layui-anim layui-anim-downbit">
    <div class="layui-form-item">
        <label class="layui-form-label" for="union-name">用户标识</label>
        <div class="layui-input-inline">
            <input id="union-name" type="text" name="unionName" autocomplete="off" class="layui-input">
        </div>
        <button id="connectBtn" class="layui-btn" type="button" lay-active="connect">连接</button>
        <button class="layui-btn" type="button" lay-active="websocketInfo">查看当前连接信息</button>
        <button class="layui-btn layui-btn-danger" type="button" lay-active="disconnect">断开</button>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="send-msg">消息</label>
        <div class="layui-input-inline">
            <input id="send-msg" type="text" name="sendMsg" autocomplete="off" class="layui-input">
        </div>
        <button class="layui-btn" type="button" lay-active="sendMsg">发送</button>
    </div>
    <div id="content" class="layui-form-item">

    </div>
</div>

<script type="text/javascript">
    layui.use(['form', 'table', 'util'], function () {
        let form = layui.form;
        let table = layui.table;
        let util = layui.util;
        let $ = layui.jquery;

        let active = {
            sendMsg: function () {
                let sendMsg = $('#send-msg').val();
                socket.send(JSON.stringify({infoType: 6, content: sendMsg}));
            },
            connect: function () {
                if (socket) {
                    active.disconnect();
                }
                /**
                 * 处理服务端发送的消息
                 * @param msg
                 */
                let onmessageCall = (msg) => {
                    let sysData = JSON.parse(msg.data);
                    switch (sysData.infoType) {
                        // 服务端心跳回应
                        case 5:
                            builder.callBackValue(sysData.contentData);
                            break;
                        case 6:
                            $('#content').append('<p>' + sysData.fromName + ": " + sysData.contentData.content + '</p>');
                            break;
                        // 前端销毁websocket对象
                        case 99:
                            active.disconnect();
                            layer.msg(SocketBuilder.unionName + ' 销毁websocket对象')
                            break;
                        default:
                            layer.alert(JSON.stringify(sysData.contentData), {title: '未知消息'});
                    }
                };

                let unionName = $('#union-name').val();
                // 连接websocket
                let builder = new SocketBuilder(onmessageCall, unionName);

                $('#connectBtn').addClass('layui-disabled').attr('disabled', true);
            },
            disconnect: function () {
                socket.close();
                $('#connectBtn').removeClass('layui-disabled').removeAttr('disabled');
            },
            websocketInfo: function () {
                request.postAjax(api.websocketInfo, {}, function (res) {
                    if (res.success && res.status === 200) {
                        let join = res.data.join('<br>');
                        layer.alert(join);
                    }
                });
            }
        };

        util.event('lay-active', active);
    });

</script>
